<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn1">螃蟹</button>
        <button id="btn2">水果树</button>
        <img src="./image/img1.jpg" alt="螃蟹" title="螃蟹">

        <script>
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var img = document.querySelector("img");

            console.log("img", img.index);
            console.dir(img)

            // 注册事件
            btn1.onclick = function () {
                img.src = "./image/img2.jpg";
                img.alt = "水果树";
                img.title = "水果树";
            }
            btn2.onclick = function () {
                img.src = "./image/img1.jpg";
                img.alt = "螃蟹";
                img.title = "螃蟹";
                }

        </script>
    </body>
</html>